<template>
  <div class="booking" id="app">
    <!--头部-->
    <nav-bar title="订单提交" left-arrow @clickLeft="$goPageBack('product/list')"/>

    <!--标题、日历-->
    <div class="booking-header" v-if="calendar_price_list[0]">
      <h1>{{product_name}}</h1>
      <template v-if="product_kind==3">
         <h3>入离日期</h3>
        <div class="booking-calendar hotel-calendar" @click="getCalendar">
          <div class="date">
              <em class="txt">入住</em>
              <div class="sub-item">
                <em>{{hotel_data.startDateStr}}</em>
                <span>{{hotel_data.startRecent}}</span>
              </div>
          </div>
          <div class="day"><em class="night">{{hotel_data.countDays}}晚</em></div>
          <div class="date">
              <em class="txt">离店</em>
              <div class="sub-item">
                <em>{{hotel_data.endDateStr}}</em>
                <span>{{hotel_data.endRecent}}</span>
              </div>
          </div>
        </div>  
      </template>
      <template v-else>
        <h3>使用日期</h3>
        <div :class="is_init_load ? 'booking-calendar init-calendar' : 'booking-calendar'">
          <ul>
            <li 
              v-for="(item, index) in date_use[0]" 
              :key="index" 
              :class="[calendar_allow_list.indexOf(item.avail_date)==-1 ? 'disabled':'', activeClass == index && 'active']"
              @click="getDateItme(index)"
            >
              <p class="date" v-if="calendar_allow_list.indexOf(item.avail_date)==-1">{{item.recent}}<br>{{item.date}}<br/> 
                <em class="font-sm">不可订</em>
              </p>
              <p class="date" v-else>{{item.recent}}<br>{{item.date}}<br/> 
                <em class="c-buy" v-if="item.price"><dfn class="font-xs">¥</dfn>{{item.price}}</em>
              </p>
            </li>
            <li :class="activeClass == 3 ? 'more active':'more'" @click="getCalendar">
              <p class="date" v-if="Object.keys(more_date).length > 0">{{more_date.recent}}<br>{{more_date.date}}<br/> 
                <em class="c-buy" v-if="more_date.price"><dfn class="font-xs">¥</dfn>{{more_date.price}}</em>
              </p>
              <p class="date" v-else>更多日期</p> 
              <van-icon class-prefix="ucai-icon" name="arrow_rgt"/>
            </li>
          </ul>
          <p v-if="is_init_load" class="c-warn note"><van-icon class-prefix="ucai-icon" name="zhushi"/>请先选择使用日期</p>
        </div>
      </template>
    </div>
 
    <!--套餐信息-->
    <package-info 
      :package_list="package_list" 
      :package_booking_time="package_booking_time" 
      :package_num="package_num" 
      :formData="formData" 
      :multi_package_stock="multi_package_stock" 
      :product_kind="product_kind"
    />

    <!--出行人信息-->
    <traveler-info 
      :traveler_type_name="traveler_type_name" 
      :product_kind="product_kind" 
      :formData="formData" 
      :id_name="id_name" 
      :id_key="id_key" 
      :travelersList="travelersList" 
      :selected_traveler="selected_traveler" 
      :package_traveler="package_traveler"
    />

    <!--预定人信息-->
    <booker-info 
      :travelersList="travelersList" 
      :contact_name="contact_name" 
      :contact_phone="contact_phone"
      :package_traveler="package_traveler"
    />
    
    <!--去支付-->
    <pay-bar 
      :formData="formData" 
      :product_name="product_name" 
      :product_kind="product_kind" 
      :multi_package_price="multi_package_price" 
      :multi_package_date="multi_package_date" 
      :package_limit="package_limit"
      :package_traveler="package_traveler"
      :traveler_type_name="traveler_type_name"
    />

    <!--日历弹窗-->
    <van-popup
      v-model="calendar_show"
      closeable
      round
      close-icon="cross"
      position="bottom"
      :style="{ height: '78%', 'padding-bottom':'50px', overflow:'hidden'}"
      @close="closeCalendar"
    >
      <div class="calendar-popup">
        <h3 class="van-hairline--bottom">请选择日期</h3>
        <booker-calendar v-if="product_kind==3" :startDate="today" :endDate="addDate(today,1)" :priceList="calendar_price_list[0]" :is_leave.sync="is_leave" :allowList="calendar_allow_list" @callback="getProductDate"/>
        <booker-calendar v-else :priceList="calendar_price_list[0]" :allowList="calendar_allow_list" @callback="getProductDate"/>
      </div>
    </van-popup>

    <!-- 水印 -->
    <slogan/>
  </div>
</template>

<script>
  import { 
    Toast,
    Icon,
    Popup,
    Dialog,
  } from "vant";
  import Vue from 'vue';
  import NavBar from "@cmpt/header/navbar"
  import bookerCalendar from '@views/booking/components/booker-calendar'
  import packageInfo from '@views/booking/components/package-info'
  import travelerInfo from '@views/booking/components/traveler-info'
  import bookerInfo from '@views/booking/components/booker-info'
  import payBar from '@views/booking/components/pay-bar'
  import Slogan from '@cmpt/slogan'
  import { formatTime } from '@utils/utils'
  import { getRolePrice } from '@utils/role'
  import {
    isLogin,
  } from '@utils/storage_base_config'
  import {
    getBooking,
    getCalendar,
    getTravelersList,
  } from "@/api/modules/booking"
  export default {
    name: 'booking-product',
    data(){
        return {
          product_id: this.$getUrlParam('product_id'),
          package_id: this.$getUrlParam('package_id'),

          product_kind:0, //产品类型[0:门票; 1:租车; 2:特产; 3:酒店; 4:餐饮; 5:线路]
          product_name:'',
          package_num:[],
          package_first_num: 0, //保存第一个套餐的初始数量（酒店）
          package_list:[],
          package_booking_time:[], //个套餐需提前预定时间
          id_name:[], //证件类型列表
          id_key:[],

          traveler_type_name:"出行人", //其他产品类型默认出行人，酒店为入住人
          contact_name:'', //默认联系人
          contact_phone: '', //默认手机号码

          package_traveler:[], //需要出行人的套餐

          travelersList:[], //出行人列表
          selected_traveler: [], //餐选中的出行人

          is_init_load:true, //页面刚加载
          activeClass:-1,
          more_date:{}, //更多日期
          
          today: formatTime(new Date().getTime()),
          date_use: [], //今天，明天，后天
          calendar_show: false, //是否显示日历
          calendar_allow_list:[], //允许操作的日期
          calendar_price_list:[],//价格日历列表

          is_leave:true, //是否离店
          hotel_data:{countDays:1}, //酒店入离时间
          multi_package_price:[], //每个套餐每天的价格
          multi_package_date:[],   //每个套餐每天的日期
          multi_package_stock:[], //每个套餐每天的库存
          package_limit:{"min":[],"max":[]}, //每个套餐的最小、最大购买数量
          ajax_index:0, //异步递归索引

          formData: {
            order_from: 0, // 订单来源(0为m版，其他具体编号见程序)
            amount: 0, // 订单金额
            should_pay: 0, // 订单实付金额
            need_delivery: 0, // 是否需要配送(0:不需要 1:自提 2:送货上门)
            area_id: 0, // 配送地址id(如果是自提地址id为产品设置的自提地址)
            ip: localStorage.local_ip||'', // 下单ip地址
            contact_name: '', // 联系人-姓名
            contact_phone: '', //联系人-电话
            remark: '', // 订单备注
            skus: [], // 套餐相关信息
            captcha: '', // 验证码
            once_str: '', // 校验字符串
          },
          isVisitorPrice: getRolePrice() === '0', // 是否展示游客价
          secret: this.$getUrlParam('secret'), // 加密字符串
        }
    },
    
    components:{
      [Toast.name]: Toast,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [NavBar.name]: NavBar,
      [bookerCalendar.name]: bookerCalendar,
      [packageInfo.name]: packageInfo,
      [travelerInfo.name]: travelerInfo,
      [bookerInfo.name]: bookerInfo,
      [payBar.name]: payBar,
      [Slogan.name]: Slogan,
    },

    created() {
      this.product()
    },

    methods:{

      //日期加一天
      addDate(date, days) {
        if (days == undefined || days == '') {
            days = 0;
        }
        var date = new Date(date);
        date.setDate(date.getDate() + days);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return date.getFullYear() + '-' + String(month).padStart(2, "0") + '-' + String(day).padStart(2, "0");
      },

      //对比两个时间大小
      compareTime(t1,t2){
        var date = new Date();
        var a = t1.split(":");
        var b = t2.split(":");
        return date.setHours(a[0],a[1]) > date.setHours(b[0],b[1]);
      },

      //对比两个日期大小
      compareDate(d1,d2){
        var Date1 = new Date(d1);
        var Date2 = new Date(d2);
        return Date1.getTime() > Date2.getTime();
      },

      //获取使用日期选择项
      getDateItme(index) {
        if(index>=0){
          if(this.calendar_allow_list.indexOf(this.date_use[0][index].avail_date)==-1){
              return false;
          }
          this.is_init_load = false;
          this.activeClass = index;
          for(let i = 0, len = this.formData.skus.length; i < len; i++) {
            let price = this.date_use[i][index].price||0;
            this.formData.skus[i].avail_date = this.date_use[i][index].avail_date; //更新出游日期
            this.formData.skus[i].sale_price = price; //更新套餐价格
            this.package_list[i].price = price; 
            this.multi_package_price[i].splice(0,1,price);//更新各套餐价格
            if(!this.date_use[i][index].stock||this.compareDate(this.package_booking_time[i],this.date_use[i][index].avail_date)){
              this.package_num[i] = 0;
              Vue.set(this.package_list[i],'stock',0);
            }else{
              if(i==0){
                this.package_num[0] = 1;
              }
              Vue.set(this.package_list[i],'stock',this.date_use[i][index].stock);
            }
          }
          //console.log("套餐列表",this.package_list);
        }
      },

      //获取日历
      getCalendar(){
        this.calendar_show = true;
      },

      //酒店产品关闭日历判断是否有选择离店日期
      closeCalendar(){
        if(this.product_kind==3 && !this.is_leave){
            Toast("请选择离店日期");
            this.calendar_show = true;
        }
      },
    
      //获取产品选中的日期、价格
			getProductDate(date){
        this.calendar_show = false;
        var countDays, startDate;

        //酒店
        if(this.product_kind==3){
          countDays = date.countDays;
          startDate = date.startDateStr;
          
          let startRecent = date.startRecent;
          let endRecent   = date.endRecent;
          let endDate     = date.endDateStr;
          if(!startRecent){
            startRecent = "周"+ date.startDate.week;
          }
          if(!endRecent){
            endRecent = "周"+ date.endDate.week;
          }

          this.hotel_data["startDateStr"] = startDate.substr(5,5);
          this.hotel_data["startRecent"] = startRecent;
          this.hotel_data["endDateStr"] = endDate.substr(5,5);
          this.hotel_data["endRecent"] = endRecent;
          this.hotel_data["countDays"] = countDays;
        }else{ 
          //其他产品类型
          countDays = 1;
          startDate = date.avail_date; 
          this.is_init_load = false;
          for(var i = 0, len = 3; i < len; i++) {
              if(this.date_use[0][i].avail_date == date.avail_date){
                this.activeClass = i;
                this.more_date = {};
                break;
              }
              else{
                this.activeClass = 3;
                this.more_date["recent"] = "周"+ date.date.week;
                this.more_date["date"] = date.avail_date.substr(5,5);
                this.more_date["price"] = date.price||0;
              }
          };
        }

        //获取各套餐的价格日历
        if(this.calendar_price_list){
          let multi_price_list = JSON.parse(JSON.stringify(this.calendar_price_list)); //防止原数组改变 
          let item_price = [], item_date = [], item_stock = []; 

          for(var m = 0, len = multi_price_list.length; m < len; m++) {
              item_price.push([]);item_stock.push([]);
              //防止日期断层数据出错
              for(let d = 0; d < countDays; d++) {
                item_price[m].push(0);
                item_stock[m].push(0);
                this.package_list[m].price = 0;
                Vue.set(this.package_list[m],'stock',0);
                this.formData.skus[m].sale_price = 0;
                this.formData.skus[m].avail_date = startDate; //更新出游/入住日期
              }
              for(let k = 0, len = multi_price_list[m].length; k < len; k++) {
                if((multi_price_list[m][k].avail_date).replace(/-/g,"/") == startDate.replace(/-/g,"/")){
                  let temp_price_list = JSON.parse(JSON.stringify(this.calendar_price_list[m]));
                  temp_price_list.splice(k,countDays).forEach((n, i) => {
                    item_price[m].splice(i,1,n.price);
                    item_stock[m].splice(i,1,n.stock);
                    item_date.push(n.avail_date.replace(/\//g, '-'));
                  });
                  this.package_list[m].price = multi_price_list[m][k].price;
                  if(this.compareDate(this.package_booking_time[m],startDate)){
                    //this.package_num[m] = 0;
                    Vue.set(this.package_list[m],'stock',0);
                  }
                  else{
                    Vue.set(this.package_list[m],'stock',multi_price_list[m][k].stock); 
                  }
                  this.formData.skus[m].sale_price = multi_price_list[m][k].price;
                }
              };

              //更新酒店日期及对应价格
              if(this.product_kind==3){
                this.formData.skus[m].hotel.splice(0,this.formData.skus[m].hotel.length);
                this.formData.skus[m].sale_price = item_price[m].reduce((x,y)=>{return x + y}); //酒店一个套餐1间的总价
                for(let i = 0, len = item_price[0].length; i < len; i++) {
                  let hotel_date_src = `{"avail_date":"${item_date[i]}","sale_price":${item_price[m][i]}}`;
                  this.formData.skus[m].hotel.push(JSON.parse(hotel_date_src));
                }

                //酒店预定时间段有没库存的日期或者过了提前预定时间，则该订单不可以预定；
                if(item_stock[m].indexOf(0)>-1 || this.compareDate(this.package_booking_time[m],this.formData.skus[m].avail_date)){
                  //this.package_num[m] = 0;
                  Vue.set(this.package_list[m],'stock',0);
                }
                else{
                  if(m==0){
                    this.package_num[0] = this.package_first_num;
                  }

                }
              }

              //库存为0套餐默认添加数置零
              if(!this.package_list[m].stock){
                this.package_num[m] = 0;
              }
          };

          this.multi_package_price = item_price;
          this.multi_package_date  = item_date;
          this.multi_package_stock = item_stock;
          //console.log("list",this.package_list);
          //console.log("选取价格",this.multi_package_price);
          // console.log("选取日期",this.multi_package_date);
         };
      },

      //获取各套餐价格日历（递归）
      getPackageCalendar(){
        if(this.ajax_index>=this.package_list.length){ 
          return;
        }
        let package_id = this.package_list[this.ajax_index].id;
        let d = new Date();
        let now_hh_mm = `${d.getHours()}:${d.getMinutes()}`;
        let secret_src = this.isVisitorPrice ? this.secret : '';

        getCalendar(package_id, 0, secret_src)
          .then(res => {
              let result = res.data;
              this.ajax_index++;
              this.calendar_price_list.push(result.sku_list||[]);

              //套餐最早可预定日期，超过当前时间加一天（early_book_type==1设置提前预定,会出在时间差，这边没有实时对比时间）
              if(Number(result.booking_attr.early_book_type)){
                let set_day      = result.booking_attr.early_book_day,
                    set_hh_mm    = `${String(result.booking_attr.early_book_hour).padStart(2, "0")}:${String(result.booking_attr.early_book_min).padStart(2, "0")}`,
                    package_time = this.addDate(this.today,set_day);
                this.compareTime(now_hh_mm,set_hh_mm) ? package_time = this.addDate(package_time,1) : package_time = package_time;
                this.package_booking_time.push(package_time);
              }
              else{
                this.package_booking_time.push(this.today);
              }
              //console.log("可预定日期",this.package_booking_time);
              
              if(this.ajax_index==this.package_list.length){
                let use_date_recen = ["今天","明天","后天"];
                let use_date = [this.today, this.addDate(this.today,1),this.addDate(this.today,2)];
                let temp_calendar_allow = [];

                //日期断层（数组可能出现不一一对应的情况，所要要拆开对比）
                var temp_date_use = [];
                for(let m = 0, len = 3; m < len; m++) {
                    let use_item = {};
                    use_item["price"]  = 0;
                    use_item["stock"]  = 0;
                    use_item["avail_date"] = use_date[m];
                    use_item["date"] = use_date[m].substr(5,5);
                    use_item["recent"] = use_date_recen[m];
                    temp_date_use.push(use_item);
                }

                let repeatDate = this.calendar_price_list[0];
                for(let i = 0, len = this.calendar_price_list.length; i < len; i++) {
                  if(this.product_kind==3){
                    Vue.set(this.package_list[i],'stock',this.calendar_price_list[i][0].stock);
                    if(this.calendar_price_list[0][0].stock==0 || this.compareDate(this.package_booking_time[i],this.calendar_price_list[i][0].avail_date)){
                      this.package_num[0] = 0;
                      Vue.set(this.package_list[i],'stock',0);
                    }
                  }

                  var three_days_info = JSON.parse(JSON.stringify(temp_date_use));
                  for(let k = 0, len = this.calendar_price_list[i].length; k < len; k++) {
                    var date = this.calendar_price_list[i][k].avail_date;;
                    temp_calendar_allow.push(date);
                    if(use_date.includes(date)){
                      var index = three_days_info.findIndex(item => item.avail_date === date);//获取对应日期下标
                      three_days_info[index].price = this.calendar_price_list[i][k].price;
                      three_days_info[index].stock = this.calendar_price_list[i][k].stock;
                    }
                  }
                  this.date_use.push(three_days_info);

                  //提取各个套餐日期、库存相同的数据
                  let arr1 = repeatDate;
                  let arr2 = this.calendar_price_list[i];
                  repeatDate = arr1.filter(item1=> arr2.some(item2 => (item1.avail_date === item2.avail_date && item1.stock === item2.stock)));
                }

                //酒店默认日期（今天、明天）
                if(this.product_kind==3){
                  this.hotel_data["startDateStr"] = this.date_use[0][0].date;
                  this.hotel_data["startRecent"] = this.date_use[0][0].recent;
                  this.hotel_data["endDateStr"] = this.date_use[0][1].date;
                  this.hotel_data["endRecent"] = this.date_use[0][1].recent;
                }
                
                //过滤各个套餐同一天库存都为0的日期
                this.calendar_allow_list = [...new Set(temp_calendar_allow)]; //允许使用日期并集
                for(let i = 0, len = repeatDate.length; i < len; i++) {
                    if(repeatDate[i].stock==0 && this.product_kind!=3){//酒店库存都为0的不禁用日历，会影响入住
                      let index = this.calendar_allow_list.indexOf(repeatDate[i].avail_date);
                      this.calendar_allow_list.splice(index,1);
                    }
                }
              }
              this.getPackageCalendar(); //递归调用
          })
      },

      //出行人证件类型对比排序
      travelerKindCompare(kind){
        return function(v1,v2){
          var val1=v1.kind;
          var val2=v2.kind;
          return val1-val2;
        }
      },

      //判断出行人证件类型是否符号产品设置的证件类型
      travelerCardType(package_index){
        if(this.travelersList){
          this.travelersList.forEach((v, k) => {
            for(let i = 0, len = v.identity.length; i < len; i++) {
              if(this.id_key[package_index].indexOf(v.identity[i].kind)!=-1){
                Vue.delete(v,'note');
                break;
              }else{
                Vue.set(v,'note',"信息不全，点击补充");
              }
            }
          });
        }
      },

      async product () {
        //获取预定信息
        let idInfo = {
          "product_id":this.product_id,
          "package_id":this.package_id,
          "secret": this.isVisitorPrice ? this.secret : ''
        };

        getBooking(idInfo)
          .then(res => {
              let result = res.data;
              let package_list   = result.package_list;
              this.product_kind  = result.product_kind;
              this.product_name  = result.product_name;
              this.contact_name  = result.contact_name;
              this.contact_phone = result.contact_phone;
              this.product_kind==3 ? this.traveler_type_name = "入住人" : this.traveler_type_name = "出行人";

              //产品已下架,返回上一页
              if(!result.product_is_release){
                Dialog.alert({
                  title: '提示',
                  message: '产品已下架'
                }).then(() => {
                  this.$goPageBack()
                });
                return false
              }
            
              if(package_list.length>0){
                this.package_list = package_list;
                this.getPackageCalendar();
             
                //组装初始提交数据
                var skus = [], all_traveler = [];
                for(let i=0; i<package_list.length; i++){
                    let package_item = {},  
                        id_real_type = package_list[i].id_real_type, //0-无需，1-仅需一位游客身份证，2-需所有游客身份证
                        init_num     = 1; //第一个套餐的初始数量(默认1，之前是默认最小限制数...)
                    
                    package_item["sale_price"] = package_list[i].price; // 销售单价
                    package_item["sku_id"] = package_list[i].id; // 套餐id
                    package_item["sku_name"] = package_list[i].name; // 套餐名称
                    package_item["qty"] = init_num; //套餐数量
                    
                    if(i>0){
                     package_item["qty"] = 0; //套餐数量 
                    }
                    else{
                      this.package_first_num = init_num;
                    }

                    package_item["coupon_record_id"] =  ""; // 优惠券领取记录
                    package_item["avail_date"] = ""; // 出游/入住日期
                    package_item["travelers"] =  []; // 出行人信息
                    skus.push(package_item);
                    this.package_limit.min.push(package_list[i].qty_limit_min);
                    this.package_limit.max.push(package_list[i].qty_limit_max);
                    this.package_num.push(package_item.qty); //初始套餐数量
      
                    if(this.product_kind==3){
                      let hotel_date_src = `{"avail_date":"${this.today}","sale_price":${package_item.sale_price}}`;
                      skus[i]["avail_date"] = this.today; 
                      skus[i]["hotel"] = [];
                      skus[i].hotel.push(JSON.parse(hotel_date_src));
                    }

                    //套餐对应单个、多个出行人 
                    if(id_real_type!=0){
                        package_item["id_real_type"] = package_list[i].id_real_type;
                        all_traveler.push(package_item);

                        //套餐对应的证件类型列表
                        let temp_id_name = [],temp_id_key = [];
                        for(let m=0; m<package_list[i].id_type.length; m++){
                          temp_id_name.push(package_list[i].id_type[m].name);
                          temp_id_key.push(package_list[i].id_type[m].key);
                        }
                        this.id_name.push(temp_id_name);
                        this.id_key.push(temp_id_key);
                    }
                    this.multi_package_price.push([package_item.sale_price]);
                    this.multi_package_date.push(package_item.avail_date);
                }
                this.formData.skus = skus;
                this.package_traveler = all_traveler;
 
                //多套餐选中出行人
                if(this.package_traveler.length>0){
                  this.package_traveler.forEach((v,k) =>{
                    this.selected_traveler.push([]);
                  })
                }  
              }
        })

        //已登录访问
        if(isLogin()){
          //获取联系人列表
          getTravelersList()
              .then(res => {
                let traveler_list = res.data.traveler_list;
                if(traveler_list){
                  traveler_list.forEach((v, k) => {
                   if(v.identity.length>1){//多个证件默认未身份证
                      v.identity.sort(this.travelerKindCompare("kind"));
                    }
                    if(k===0 && this.package_traveler.length ==1){
                     Vue.set(v,'active',true); //单套餐默认选中第一个出行人
                    }else{
                      Vue.set(v,'active',false);
                    }
                  });
                  this.travelersList = traveler_list;

                  //单套餐
                  if(this.package_traveler.length ==1){
                    this.travelerCardType(0);
                    this.selected_traveler[0].push(traveler_list[0]);
                  }
                  //console.log("travelersList",this.travelersList)
                }
          })
        }
      }

    },
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.booking{
  padding-bottom: 50px;
}

.booking-header{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 16px 16px;
  h1{
    line-height: 26px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 400;
    .ellipsis(2);
  }
  h3{
    line-height: 35px;
     font-size: 16px;
     font-weight: 400;
  }
}

.booking-calendar{
  background: #f8f8f8;
  padding: 12px;
  overflow: hidden;
  ul{
    display: flex;
    overflow: hidden;
  }
  li{
    position: relative;
    flex: 1;
    height: 62px;
    line-height: 15px;
    font-size: 12px;
    text-align: center;
    border: solid 1px #ddd;
    border-radius: 5px;
    margin-right: 10px;

    .date{
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      text-align: center;
      line-height: 1.25;
    }

    &:last-child{
      margin-right: 0;
    }

    &.disabled{
      border: solid 1px #ccc;
      background: #ccc;
      color: #999;
      .price{
        color: #999;
      }
    }

    &.active{
      border: solid 1px @color-main;
      background: @color-main;
      color: #fff!important;
      .date,.c-buy{
        color: #fff!important;
      }
    }

    &.more{
      color:@color-main;
      .date {
        width: 34px;
        left: 50%;
        margin-left: -20px;
      }
      .ucai-icon-arrow_rgt{
        position: absolute;
        top: 50%;
        right:0;
        transform: translateY(-50%);
      }
    }
  }
}

.hotel-calendar{
  width: 100%;
  padding: 15px 0;
  display: flex;

  .date{
    flex: 1;
    padding-left: 20px
  }

  >div{
    font-size: 12px;
    height: 46px;

    .txt {
      color: #999;
    }
    .sub-item{
        color: @color-main;
        em{
          font-size: 18px;
        }
    }
    .night{
      width: 44px;
      height: 44px;
      border: 1px solid #ddd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

}

.init-calendar{
    background: #fef2f2;
    .ucai-icon-zhushi{
      font-size: 14px;
      margin-right: 5px;
      vertical-align: text-top;
    }
    .note{
      padding-top:12px;
      font-size: 12px;
    }
  }

.calendar-popup{
  h3{
    text-align: center;
    line-height: 44px;
    font-size: 18px;
    font-weight: normal;
  }
}
</style>